<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>iceEditor-演示DEMO</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body style="margin: 100px;">
<div style="text-align: center;font-size:20px;margin-bottom: 20px;">演示DEMO</div>
<div style="text-align: center;font-size:15px;margin-bottom: 20px;">官方：<a href="https://www.iceui.net/iceEditor.html" target="_blank">https://www.iceui.net/iceEditor.html</a></div>
<div id="content"></div>
<script type="text/JavaScript" src="src/iceEditor.js"></script>
<script>
 //自定义编辑器菜单
var e = new ice.editor("content");
e.uploadUrl = "src/upload.php";
e.pasteText = false;
e.screenshot = true;
e.screenshotUpload = true;
//e.menu=['fontSize','foreColor','bold','italic','underline','strikeThrough','line','justifyLeft','justifyCenter','justifyRight','line','table','insertImage','video'];


//下拉菜单类型
e.plugin({
	menu:'代码语言',
		name:'codeLanguages',
		dropdown:`
			<div class="iceEditor-codeLanguages" style="padding:10px 20px;">
				<div>iceCode代码高亮</div>
				<select>
					<option disabled selected>代码语言</option>
					<option value ="html">HTML/XTML</option>
					<option value ="css">CSS</option>
					<option value ="js">JS</option>
					<option value="php">PHP</option>
					<option value="python">Python</option>
					<option value="java">JAVA</option>
					<option value="sql">SQL</option>
					<option value="go">GO</option>
					<option value="cpp">C++</option>
					<option value="csharp">C#</option>
					<option value="c">C</option>
				</select>
			</div>`,
		success:function(e,z){
			//获取content中的按钮
			var select = e.getElementsByTagName('select')[0];
			//设置点击事件
			select.onchange=function(){
				//判断光标是否在pre标签中
				if(z.inNodeParent(z.range.getRangeAt(0).endContainer,'pre')){
					var pre = z.range.getRangeAt(0).endContainer.parentNode;
					if(pre.tagName == 'PRE'){
						pre.className = 'iceCode:'+select.value;
					}
					return;
				}
				var str = z.getSelectHTML().replace(/<\s*\/p\s*>/ig,"\n").replace(/<[^>]+>/g,'').replace(/\n/g,'<br>').trim();
				str = str.length?str:' ';
				z.element.focus();
				var range = z.range.getRangeAt(0);
				var frag = range.createContextualFragment('<pre class="iceCode:'+select.value+'">'+str+'</pre>');
				var lastNode = frag.firstChild.lastChild;
				range.insertNode(frag);
				range.setStart(lastNode,0);
				range.setEnd(lastNode,0);
				range.collapse();
				select.getElementsByTagName('option')[0].selected = true;
			}	
		}
});

//function方式
e.plugin({
	menu:'function方式',
	name:'click',
	click:function(e,z){
		z.setText('hello world');
	}
});
//function方式
e.plugin({
	menu:'<svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M689.25060779 62.95703666C877.07192889 62.95703666 997.45185223 213.56847445 997.45185223 416.26889443c0 157.29853667-142.33448334 330.53203001-422.76788224 525.18608669a110.10048 110.10048 0 0 1-125.36793998 0C168.88263111 746.80092445 26.54814777 573.56743111 26.54814777 416.26889443 26.54814777 213.56847445 146.92807111 62.95703666 334.74939221 62.95703666c67.82976 0 113.83845888 23.70218667 177.25060779 77.47811555C575.42428445 86.67136 621.42084779 62.95703666 689.25060779 62.95703666z m0 71.84687445c-47.14951111 0-79.94178333 17.28208555-133.07448889 62.62328889-2.46366777 2.09957888-16.384 14.07810333-20.41325113 17.50053888a36.77297778 36.77297778 0 0 1-47.52573554 0c-4.02924999-3.43457223-17.94958222-15.40096-20.41325113-17.50053888-53.13270557-45.34120334-85.92497778-62.62328889-133.07448889-62.62328889C191.35905223 134.80391111 99.36592555 249.4676389 99.36592555 414.9460389 99.36592555 541.12711111 228.53252779 697.7338789 491.10129778 879.30500779a36.80938667 36.80938667 0 0 0 41.79740444 0C795.46747221 697.74601443 924.63407445 541.12711111 924.63407445 414.9460389c0-165.4784-91.99312555-280.14212779-235.38346666-280.14212779z" p-id="670"></path></svg>',
	name:'heard',
	click:function(e,z){
		z.setText('hello world');
	}
});
//execCommand命令
e.plugin({
	menu:'删除命令',
	name:'del',
	data:'delete'
});
//下拉菜单类型
e.plugin({
	menu:'下拉菜单',
	name:'dropdown',
	dropdown:'<div class="iceEditor-exec" data="copy" style="padding:10px 20px;">复制选中的文字</div>',
});
//弹出层类型
e.plugin({
	menu:'弹窗演示',
	name:'popup',
	style:'.demo-p{margin-bottom:10px}.demo-button{padding:0 10px}',
	popup:{
		width:230,
		height:120,
		title:'我是一个demo',
		content:'<p class="demo-p">在光标处插入hello world!</p> <button class="demo-button" type="button">确定</button>',
	},
	success:function(e,z){
		//获取content中的按钮
		var btn = e.getElementsByTagName('button')[0];
		//设置点击事件
		btn.onclick=function(){
			z.setText('hello world');
			//关闭本弹窗
			e.close()
		}	
	}
});
e.create();
e.setValue(`<p>本实例js脚本：</p>
	<p></p>
	<pre class="iceCode:js">var str = 'hello world';<br>console.log(str);<br></pre>
	<p></p>
	<p><font color="#00b050" size="2">//实例化（传递一个id）</font></p>
	<p><font color="#595959" size="2">var edit = new ice.editor("content");</font></p>
	<p></p>
	<p><font color="#00b050" size="2">//自定义编辑器工具栏菜单（默认展示所有功能）</font></p>
	<p><font color="#595959" size="2">edit.menu=["fontSize","foreColor","bold","italic","underline","strikeThrough","line","justifyLeft","justifyCenter","justifyRight","line","table","insertImage"];</font></p>
	<p></p>
	<p><font color="#00b050" size="2">//编辑器创建</font></p>
	<p><font color="#595959" size="2">edit.create();</font></p>`);
</script>

</body>
</html>